<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的消息</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="http://localhost:8080/css/chatlist.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <form action="/goodslist" method="get">
                    <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 15px">首页</button>
                </form>
            </ul>
            <ul class="nav navbar-nav">
                <form action="/release" method="get">
                    <button type="submit" class="btn btn-info" style="margin-top: 8px">发布商品</button>
                </form>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form action="/chatlist" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">我的消息
                        </button>
                    </form>
                </li>
                <li>
                    <form action="/mysell" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">我的发布
                        </button>
                    </form>
                </li>
                <li>
                    <form action="/mycollection" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">我的关注
                        </button>
                    </form>
                </li>
                <li>
                    <form action="/logout" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">退出登录
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>
<section class="goodsDetailBox w1200">
    <div class="wrapper">
        <p class="name">消息列表</p>
        <div class="media-box" id="chatList">

        </div>
    </div>
</section>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    let userId;

    window.onload = function () {
        $.ajax({
            url: "/user/id",
            type: "GET",
            success: function (result) {
                userId = result;
                getChatList();
            },
            error: function () {
                alert("获取用户id失败");
            }
        })
    }

    setInterval("getChatList()", 20000); //定时每20秒获取一次消息列表

    function getChatList() {
        $.ajax({
            url: "/message/" + userId,
            type: "GET",
            success: function (result) {
                let msg = "";
                let hash = [];

                for (let i in result) {
                    let item = result[i];
                    let name;
                    let id;

                    if (item['senderId'] == userId) id = item['receiverId'];
                    else id = item['senderId'];
                    if (hash[id]) continue;
                    hash[id] = true;
                    name = getName(id);

                    msg += "<div class=\"media\">\n" +
                        "                <div class=\"media-left\">\n" +
                        "                    <img style=\"width: 30px;\" class=\"media-object\" src=\"http://localhost:8080/image/photo1.png\">\n" +
                        "                </div>\n";
                    msg += "      <div class=\"media-body\">\n" +
                        "                    <div style=\"margin-top: 5px\">" + name + "</div>\n" +
                        "                </div>\n" +
                        "                <div class=\"media-right\">\n" +
                        "                    <button class=\"btn btn-primary\" style=\"margin-right: 50px\" onclick='chat(" + id + ")'>进入聊天</button>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "            <hr>"
                }

                $("#chatList").html(msg);
            },
            error: function () {
                alert("获取消息失败");
            }
        })
    }

    function getName(id) {
        let name;

        $.ajax({
            async: false,
            url: "/user/name",
            type: "GET",
            data: {"id": id},
            success: function (result) {
                name = result;
            },
            error: function () {
                alert("获取用户名失败");
            }
        })
        return name;
    }

    function chat(id) {
        window.location.href = "/chat/" + id;
    }

</script>
</body>
</html>